<script lang="ts" setup>
import {SmileOutlined, DownOutlined} from "@ant-design/icons-vue";
import {computed, onMounted, reactive, ref} from "vue";
import {deleteUserUsingPost, listUserVoByPageUsingPost} from "@/api/userController.ts";
import {message} from "ant-design-vue";
import dayjs from "dayjs";

const columns = [
  {
    name: "id",
    dataIndex: "id",
    key: "id",
  },
  {
    title: "账号",
    dataIndex: "userAccount",
    key: "userAccount",
  },
  {
    title: "用户名",
    dataIndex: "userName",
    key: "userName",
  },
  {
    title: "头像",
    dataIndex: "userAvatar",
    key: "userAvatar",
  },
  {
    title: "简介",
    dataIndex: "userProfile",
    key: "userProfile",
  },
  {
    title: "用户角色",
    dataIndex: "userRole",
    key: "userRole",
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    key: "createTime",
  },
  {
    title: "操作",
    key: "action",
  },
];

const dataList = ref<API.UserVO[]>([]);
const total = ref(0);

const fetchData = async () => {
  const res = await listUserVoByPageUsingPost({
    ...searchParams,
  });
  if (res.code === 0 && res.data) {
    dataList.value = res.data.records ?? [];
    total.value = res.data.total ?? 0;
  } else {
    message.error("获取数据失败，" + res.message);
  }
};

const searchParams = reactive<API.UserQueryDTO>({
  current: 1,
  pageSize: 10,
  sortField: "createTime",
  sortOrder: "ascend",
});

const pagination = computed(() => {
  return {
    current: searchParams.current,
    pageSize: searchParams.pageSize,
    total: total.value,
    showSizeChanger: true,
    showQuickJumper: true,
    position: "bottomCenter",
    showTotal: (total: number) => `共 ${total} 条`,
  };
});

const doTableChange = (page: any) => {
  searchParams.current = page.current
  searchParams.pageSize = page.pageSize
  fetchData()
}

const doSearch = () => {
  searchParams.current = 1
  fetchData();
};

//删除一条数据
const doDelete = async (id: number) => {
  const res = await deleteUserUsingPost({
    id: id,
  });
  if (res.code === 0) {
    message.success("删除成功");
    //刷新数据
    await fetchData();
  } else {
    message.error("删除失败，" + res.message);
  }
}


onMounted(() => {
  fetchData();
});
</script>
<template>
  <!--  搜索表单-->
  <a-form
      layout="inline"
      :model="searchParams"
      @finish="doSearch"
      style="margin-bottom: 16px"
  >
    <a-form-item label="账号">
      <a-input v-model:value="searchParams.userAccount" placeholder="请输入账号" allow-clear/>
    </a-form-item>
    <a-form-item label="用户名">
      <a-input v-model:value="searchParams.userName" placeholder="请输入用户名" allow-clear/>
    </a-form-item>
    <a-form-item>
      <a-button
          type="primary"
          html-type="submit"
      >
        搜索
      </a-button>
    </a-form-item>
  </a-form>
  <!--  表格-->
  <a-table
      :columns="columns"
      :data-source="dataList"
      :pagination="pagination"
      @change="doTableChange"
  >
    <template #bodyCell="{ column, record }">
      <template v-if="column.dataIndex === 'userAvatar'">
        <a-image :src="record.userAvatar" width="120px"/>
      </template>
      <template v-else-if="column.dataIndex === 'userRole'">
        <div v-if="record.userRole === 'admin'">
          <a-tag color="green">管理员</a-tag>
        </div>
        <div v-else>
          <a-tag color="blue">普通用户</a-tag>
        </div>
      </template>
      <template v-else-if="column.dataIndex === 'createTime'">
        {{ dayjs(record.createTime).format("YYYY-MM-DD HH:mm:ss") }}
      </template>
      <template v-else-if="column.key === 'action'">
        <a-button danger @click="doDelete(record.id)">删除</a-button>
      </template>
    </template>
  </a-table>
</template>
